<template>
  <div class="banner-item">
    <div
      v-if="componentData.coverImage || componentData.coverImageApp"
      :style="{
        backgroundImage: `url(${componentData.coverImageApp || componentData.coverImage})`,
      }"
      class="bg"
    >
      <img
        v-if="componentData.coverImage || componentData.coverImageApp"
        :src="componentData.coverImageApp || componentData.coverImage"
        alt="solution"
      />
    </div>
    <p v-if="componentData.titleZh">{{ componentData[`title${capitalizeLang}`] }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
  },
}
</script>

<style lang="less" scoped>
.banner-item {
  position: relative;
  background-color: #fff;

  .bg {
    min-height: 750px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    img {
      width: 100%;
      display: block;
      opacity: 0;
    }
  }

  p {
    position: absolute;
    width: 560px;
    font-size: 24px;
    line-height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 40px;
    color: #fff;
  }
}
</style>
